<template>
<div class="home">
  <div class="home_img">
    <img src="../../assets/image/home/home (8).png" alt="" class="home_img" />
  </div>
  <Search />
  <div class="home_br"></div>
  <div class="home_box">
    <div class="box">
      <div class="left">
        <div class="left_1">
          <div class="img">
            <img src="../../assets/image/home/home (13).png" alt="" />
          </div>
          <div class="text">出版社列表</div>
        </div>
        <div class="left_2">
          <div v-for="(item, index) in arr" :key="index">
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="block">
          <el-carousel trigger="click">
            <el-carousel-item>
              <img src="../../assets/image/home/home (14).png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/image/home/home (14).png" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/image/home/home (14).png" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- <img
            src="../../assets/image/home/home (14).png"
            alt=""
            class="home_img"
          /> -->
      </div>
      <div class="right">
        <div class="right1">党 建 工 作</div>
        <hr />
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <li>
          <img src="../../assets/image/home/home (16).png" alt="" class="home_min" />集团党委理论学习中心组认
        </li>
        <div class="rimg" @click="tz">
          <img src="../../assets/image/home/home (11).png" />
        </div>
      </div>
    </div>
  </div>
  <div class="home_img">
    <img src="../../assets/image/yy/yy.png" alt="" class="home_img" />
  </div>
  <div class="home_box1">
    <div class="box_1">
      <div class="new_top">
        <Booklist />
      </div>
      <div class="new_bottom">
        <img src="../../assets/image/home/home (17).png" alt="" class="home_img" />
      </div>
    </div>
  </div>
  <div class="home_img">
    <img src="../../assets/image/yy/yy.png" alt="" class="home_img" />
  </div>
  <div class="home_box2">
    <div class="box_2">
      <div class="new_top">
        <Booklist />
      </div>
    </div>
  </div>
  <div class="home_img">
    <img src="../../assets/image/yy/yy.png" alt="" class="home_img" />
  </div>
  <div class="home_box3">
    <div class="box_3">
      <div class="new_top">
        <Booklist />
      </div>
    </div>
  </div>
  <Bottom />
</div>
</template>

<script>
import Search from '../../components/Search'
import Booklist from '../../components/Booklist'
import Bottom from '../../components/Bottom'
export default {
  components: {
    Search,
    Booklist,
    Bottom
  },
  data() {
    return {
      arr: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        '',
        'X',
        'Y',
        'Z',
        ''
      ],
      images: ['../../assets/image/home/home (14).png']
    }
  },
  methods: {
    tz() {
      console.log(111)
      this.$router.push('/index/shop')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-carousel__indicators {
  margin-left: 180px;
}

/deep/.el-carousel__button {
  width: 19px;
  height: 19px;
  // background: #bfbfbf;
}

.home {
  width: 100%;
  height: 100%;

  .home_img {
    width: 100%;
    height: 105px;
  }

  .home_top {
    height: 210px;
    width: 100%;

    .home_top1 {
      width: 1310px;
      height: 100%;
      margin: auto;
      padding-top: 68px;
      padding-left: 69px;
    }
  }

  .home_br {
    width: 100%;
    height: 6px;
    background: #960006;
  }

  .home_box {
    width: 100%;
    height: 431px;

    .box {
      width: 1310px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      padding-left: 69px;

      .left {
        width: 195px;

        .left_1 {
          width: 195px;
          height: 52px;
          background: #960006;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .img {
            width: 35px;
            height: 35px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .text {
            width: 107px;
            height: 20px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
          }
        }

        .left_2 {
          margin-top: 20px;
          text-align: center;
          align-items: center;
          display: flex;
          width: 195px;
          flex-wrap: wrap;

          div {
            width: 25%;
            height: 45px;
            line-height: 40px;
            border-bottom: 2px solid #960007;

            span {
              width: 29px;
              height: 29px;
              display: inline-block;
              color: #49474786;
              font-size: 24px;
              font-weight: 400;
              font-family: SJyunhei;
            }
          }
        }
      }

      .content {
        width: 650px;

        .block {
          width: 650px;
          height: 391px;
          padding: 7px 32px 0 35px;

          /deep/ .el-carousel__container {
            height: 391px;
          }
        }

        img {
          width: 650px;
          height: 391px;
          padding: 7px 32px 0 35px;
        }
      }

      .right {
        width: 210px;
        position: relative;

        .home_min {
          width: 9px;
          height: 9px;
          margin-right: 5px;
        }

        .right1 {
          height: 70px;
          line-height: 70px;
          font-size: 20px;
          font-family: MicrosoftYaHei;
          font-weight: bold;
          color: #960007;
        }

        li {
          line-height: 40px;
        }

        .rimg {
          width: 41px;
          height: 40px;
          background: #d2d0d0;
          position: absolute;
          top: 85px;
          right: -60px;

          img {
            width: 30px;
            height: 30px;
            margin: 5px 5px;
          }
        }
      }
    }
  }

  .home_box1 {
    width: 100%;
    height: 717px;

    .box_1 {
      width: 1310px;
      height: 717px;
      margin: 0 auto;
      padding-left: 69px;

      .new_top {
        margin: 50px 0 48px 31px;
      }

      .new_bottom {
        width: 1128px;
        height: 110px;
      }
    }
  }

  .home_box2 {
    width: 100%;
    height: 545px;

    .box_2 {
      width: 1310px;
      margin: 0 auto;
      height: 545px;
      padding-left: 69px;

      .new_top {
        margin: 50px 0 48px 31px;
      }
    }
  }

  .home_box3 {
    width: 100%;
    height: 563px;

    .box_3 {
      width: 1310px;
      height: 563px;
      padding-left: 69px;
      margin: 0 auto;

      .new_top {
        margin: 50px 0 48px 31px;
      }
    }
  }

  // .home_box4 {
  //   width: 100%;
  //   height: 282px;
  //   background: #f6f4f7;
  //   .box_4 {
  //     width: 1310px;
  //     padding-left: 69px;
  //     height: 282px;
  //     margin: 0 auto;
  //     .new_top {
  //       padding: 31px 0 50px 0;
  //       display: flex;
  //       .left {
  //         display: flex;
  //         .item {
  //           width: 129px;
  //           margin-right: 31px;
  //           .t1 {
  //             text-align: center;
  //             height: 16px;
  //             font-size: 15px;
  //             font-family: Microsoft YaHei;
  //             font-weight: 400;
  //             color: #040203;
  //             line-height: 10px;
  //           }
  //           hr {
  //             background: #ccc;
  //             height: 2px;
  //             color: #ccc;
  //           }
  //           .t {
  //             display: flex;
  //             align-items: center;
  //             font-size: 12px;
  //             font-family: Microsoft YaHei;
  //             font-weight: 400;
  //             color: #030202;
  //             line-height: 20px;
  //             span {
  //               width: 4px;
  //               height: 4px;
  //               background: #ccc;
  //               display: block;
  //               margin: 0 10px 0 5px;
  //             }
  //           }
  //         }
  //       }
  //       .right {
  //         width: 250px;
  //         display: flex;
  //         img {
  //           width: 95px;
  //           height: 95px;
  //           margin: 0 27px 0 27px;
  //         }
  //       }
  //     }
  //     .new_bottom {
  //       width: 486px;
  //       height: 59px;
  //       margin: 0 auto;
  //       color: #999999;

  //       .bot {
  //         font-size: 13px;
  //         font-family: Microsoft YaHei;
  //         font-weight: 400;
  //         line-height: 22px;
  //         text-align: center;
  //       }
  //     }
  //   }
  // }
}
</style>
